import React from "react";
import BaseComponent from "../../redare/components/BaseComponent";
import {Modal} from "antd";

export default class ModalNoAnt extends BaseComponent{

  // 子节点的Ref
  sonRef = undefined;

  static defaultProps = {
    title: '-', //标题
    oktext: '确定',
    canceltext: '取消',
    okfn: ()=>{} //确定回调函数
  };

  state = {
    showModal: false,
    loading: false,
    footer: undefined
  };

  // 创建 Ref
  attachRef = node => {
    this.sonRef = node;
  }

  componentWillUnmount() {
    if(this.interval_01){
      clearInterval(this.interval_01);
    }
  }

  show(_state = {}){
    let {footer} = _state;
    this.setState({showModal: true, footer: footer});
  }

  // 获取子节点实例
  getInstance(){

    let instance = this.sonRef;

    if( !instance ){
      return  null;
    }

    if( instance.current ){
      return instance.current;
    }else {
      return instance;
    }
  }

  // 展示并且获取子节点实例
  showAndGetInstance(callbcak, _state = {}){
    if(this.interval_01){
      clearInterval(this.interval_01);
    }
    if(!this.state.showModal){
      let {footer} = _state;
      this.setState({showModal: true, footer: footer}, ()=>{
        this.forceUpdate(()=>{

          this.interval_01 = setInterval(()=>{

            let instance = this.getInstance();
            if( instance ){
              if( callbcak ){
                callbcak(instance);
              }
              clearInterval(this.interval_01);
            }
          }, 100);


        });
      });
    }else if(callbcak){
      callbcak(this.getInstance());
    }
  }

  openLoading = ()=>{
    this.setState({loading: true});
  }

  closeLoading = ()=>{
    this.setState({loading: false});
  }

  closeModal = ()=>{
    this.setState({showModal: false, loading: false});
  }

  render() {

    let node = null;
    if( this.props.children ){
      // node = React.cloneElement(this.props.children, {ref: this.sonRef});
      node = React.cloneElement(this.props.children, {ref: this.attachRef});
    }

    let bodyStyle = this.props.bodyStyle;
    if( !bodyStyle ){
        bodyStyle = {maxHeight: 'calc(80vh - 88px)', overflowY: 'auto'};
    }

    return (
      <Modal
        {...this.props}
        title={this.props.title}
        visible={this.state.showModal}
        onOk={() => this._onOK()}
        onCancel={()=>{this._onCancel()}}
        centered={true}
        okText={this.props.oktext}
        cancelText={this.props.canceltext}
        maskClosable={false}
        confirmLoading={this.state.loading}
        forceRender={false}
        destroyOnClose={true}
        footer={this.state.footer}
        bodyStyle={bodyStyle}
      >
        {node}
      </Modal>
    )
  }


  async _onOK(){

    // 父组件传递过来的回调函数
    let okFn = this.props.okfn;

    // 如果不是函数
    if( !okFn || okFn.constructor !== Function ){
      this.setState({loading: false});
      return;
    }

    // 返回给回调的执行方法
    let outResultFn = {
      openLoading: this.openLoading,
      closeLoading: this.closeLoading,
      closeModal: this.closeModal
    };

    // 具体事务函数处理
    let prentOkFn = async ()=>{
      // 将操作 modal 和 loading 的【回调参数】再次传递回 【父组件的回调函数】
      okFn(outResultFn);
    };

    // 执行最终的业务函数
    await prentOkFn();
  }

  _onCancel(){
    this.setState({showModal: false});
  }

}